<!DOCTYPE html>
<html lang="en">

<head>
    <title>Flask_Chat_App</title>
    <style>
        h1 {
            color:aqua;
        }
    </style>
</head>

<body>
    <h1>bbb</h1>

    <h3 style='color: #ccc;font-size: 30px;'>No message yet..</h3>
    <div class="message_holder"></div>

    <form action="" method="POST">
        <input type="text" class="username" placeholder="User Name" />
        <input type="text" class="message" placeholder="Messages" />
        <input type="submit" />
    </form>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript">
        $('#h1').html(123)
        element = document.getElementsByTagName('h1')
        element.innerHTML = "Milk"

        var socket = io.connect('http://' + document.domain + ':' + location.port);

        // listening: default event
        socket.on('connect', function () {
            console.log('connect event: initial socketio')
            socket.emit('my event', {
                data: 'User Connected'
            })
            var form = $('form').on('submit', function (e) {
                e.preventDefault()
                let user_name = $('input.username').val()
                let user_input = $('input.message').val()
                socket.emit('my event', {
                    user_name: user_name,
                    message: user_input
                })
                $('input.message').val('').focus()
            })
        })

        socket.on('message', function(){
            console.log('message event: send a string message')
            socket.send('message event: send a string message')
        })

        socket.on('json', function(){
            console.log('json event: send a json message')
            socket.send('json event: send a json message')
        })

        socket.on('disconnect', function(){
            console.log('disconnect event: send a disconnect message')
            socket.send('disconnect event: send a disconnect message')
        })

        // listening: custom event
        socket.on('my response', function (msg) {
            console.log(msg)
            if (typeof msg.user_name !== 'undefined') {
                $('h3').remove()
                $('div.message_holder').append('<div><b style="color: #000">' + msg.user_name + '</b> ' + msg.message + '</div>')
            }
        })
    </script>

</body>

</html>